{include file="public/header" /}
<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form" lay-filter="layui-app-form" id="layui-app-form" style="display:none" >
            <div class="layui-form-item" style="margin-top: 20px">
                <div class="layui-inline">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" id="title" lay-verify="required" class="layui-input"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <textarea id="content" name="content" autocomplete="on" style="width: 90%" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <input type="checkbox" id="switch-status" lay-skin="switch" lay-filter="switchStatus" lay-text="显示|隐藏" checked />
                    <input type="hidden" id="status" value="1" />
                </div>
            </div>
        </form>
        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-list layui-count" data-type="insert">添加</button>
            </div>
            <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
            <script type="text/html" id="table-content-list">
                <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit"><i class="layui-icon">编辑</i></a>
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete"><i class="layui-icon">删除</i></a>
            </script>
        </div>
    </div>
</div>
<script>
layui.use(['layer', 'table','form','laydate'], function(){
    var $ = layui.$
            ,table = layui.table
            ,laydate = layui.laydate
            ,form = layui.form;
    table.render({
        elem: '#LAY-app-content-list'
        ,url: "{:url('help/getHelpList')}"
        , request: {
            pageName: 'page',
            limitName: 'page_size'
        }
        , page: {
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
            ,first: '首页'
            ,last: '尾页'
            ,limit: 10
        }
        , cellMinWidth: 120
        ,cols: [[
            {field: 'id',type: 'checkbox', align: 'center'}
            ,{field: 'id', width: 80, title: 'ID', align:'center'}
            ,{field: 'title', title:'标题',align:'center'}
            ,{field: 'status', title: "状态", align:'center', templet: function (d) {
                var is_checked = '';
                if (d.status == 1) {
                    is_checked = 'checked';
                }
                return '<input type="checkbox" switch_status_id="'+ d.id +'" value="'+ d.status +'" lay-skin="switch" lay-text="显示|隐藏" lay-filter="status" '+ is_checked +'>';
            }}
            ,{field: 'create_time', title:'反馈时间',align:'center'}
            ,{title: '操作', minWidth: 180, align: 'center', toolbar: '#table-content-list'}
        ]]
        , text: {
            none: '暂无相关数据'
        }
    });

    // 监听开关事件
    form.on('switch(switchStatus)', function(data){
        var contexts;
        var x = data.elem.checked;
        if (x == true) {
            contexts = "确定要显示么";
            $("#status").val(1);
        } else {
            contexts = "确定要隐藏么";
            $("#status").val(-1);
        }
        layer.open({
            content: contexts
            , btn: ['确定', '取消']
            , yes: function (index, layero) { //按钮【按钮一】的回调
                data.elem.checked = x;
                form.render();
                layer.close(index);
            }
            , btn2: function (index, layero) {  //按钮【按钮二】的回调
                data.elem.checked = !x;
                form.render();
                layer.close(index);
            }
            , cancel: function () {
                data.elem.checked = !x;
                form.render();
            }
        });
        return false;
    });
    // 监听工具条
    table.on('tool(LAY-app-content-list)', function(obj){
        var data = obj.data;
        if(obj.event === 'delete'){
            layer.confirm('确定删除该条记录吗？', {title : '温馨提示'}, function(index){
                $.ajax({
                    url:"{:url('help/delete')}",
                    type:'post',
                    data:{'id':data.id},
                    success: function(res){
                        if (res.code == 0) {
                            obj.del();
                            layer.msg(res.msg, {icon: 1});
                        } else {
                            layer.msg(res.msg, {icon: 5});
                        }
                    }
                });
            });
        } else if(obj.event === 'edit'){
            $("#title").val(data.title);
            $("#content").val(data.content);
            if (data.status == -1) {
                $("#switch-status").attr("checked", false);
                $("#status").val(-1);
            } else if(data.status == 1){
                $("#switch-status").attr("checked", true);
            }
            form.render();
            layer.open({
                type:1,
                skin: 'demo-class',
                area:['800px','85%'],
                title: '编辑',
                content: $("#layui-app-form"),
                shade: 0,
                btn: ['确定', '取消'],
                yes: function(){
                    var title = $('#title').val();
                    var content = $('#content').val();
                    var status = $('#status').val();
                    if (title == '' || content == ''){
                        return layer.msg('标题和内容不能为空', {icon: 5});
                    }
                    $.post("{:url('help/edit')}", {id:data.id, title:title, content:content, status:status}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            table.reload('LAY-app-content-list');
                            $("#layui-app-form")[0].reset();
                            layer.closeAll();
                        } else {
                            layer.msg(res.msg, {icon: 5});
                        }
                    });
                },
                btn2: function(){
                    $("#layui-app-form")[0].reset();
                    layer.closeAll();
                },
                cancel: function(){
                    $("#layui-app-form")[0].reset();
                    layer.closeAll();
                }
            });
        }
    });

    var $ = layui.$, active = {
        insert: function(){
            layer.open({
                type:1,
                skin: 'demo-class',
                area:['800px','85%'],
                title: "添加",
                content: $("#layui-app-form"),
                shade: 0,
                btn: ['确定', '取消'],
                yes: function(){
                    var title = $('#title').val();
                    var content = $('#content').val();
                    var status = $('#status').val();
                    if (title == '' || content == ''){
                        return layer.msg('标题和内容不能为空', {icon: 5});
                    }
                    $.post("{:url('help/edit')}", {title:title, content:content, status:status}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            $("#layui-app-form")[0].reset();
                            table.reload("LAY-app-content-list");
                            layer.closeAll();
                        } else {
                            layer.msg(res.msg, {icon: 5});
                        }
                    });
                },
                btn2: function(){
                    $("#layui-app-form")[0].reset();
                    layer.closeAll();
                },
                cancel: function(){
                    $("#layui-app-form")[0].reset();
                    layer.closeAll();
                }
            });
        }
    };

    $('.layui-btn.layuiadmin-btn-list').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});
</script>
{include file="public/footer"}
